<!--
 * @Description: 预览图片
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-08-29 17:17:12
-->
<script setup lang="ts">
import { IOption } from '@/plugin/viewImage'
const imgRef = ref()
const state = reactive({
  isShow: false,
  imgUrl: '',
  imgStyle: computed(() => `transform:scale(${transform.scale}) rotate(${transform.rotate}deg)`),
  // 是否可以通过点击 modal 关闭   默认true
  closeOnClickModel: true
})
const transform = reactive({
  scale: 1,
  rotate: 0
})
const close = () => (state.isShow = false)
const open = (url: string, option: IOption) => {
  const { closeOnClickModel } = option
  state.imgUrl = url
  state.isShow = true
  //判断传入参数是否启用 closeOnClickModel
  state.closeOnClickModel = closeOnClickModel
  reset()
  addEvent()
}

const reset = () => {
  transform.rotate = 0
  transform.scale = 1
}
/**添加相关监听事件 */
const addEvent = () => {
  /**
   * 监听 ESC 键盘事件
   */
  document.onkeydown = (e: KeyboardEvent) => {
    //此处填写你的业务逻辑即可
    if (e.key === 'Escape') {
      state.isShow = false
      //移除监听
      document.onkeydown = null
    }
  }
  //不使用nextTick会造成获取不到imgRef.value
  nextTick(() => {
    // 图片加载完成回调函数
    imgRef.value.onload = () => {
      // 添加鼠标滚动事件
      ;(imgRef?.value as any).onmousewheel = (e: WheelEvent) => {
        if (e.deltaY > 0) {
          //缩小
          transform.scale > 0.2 ? (transform.scale -= 0.1) : '' //此处进行最小缩放限制  否则会造成图片不存在 和其他bug
        } else {
          //放大
          transform.scale += 0.2
        }
      }
    }
  })
}
defineExpose({
  close,
  open
})
</script>
<template>
  <Transition>
    <div class="flex flex-col items-center justify-center view-img" v-if="state.isShow">
      <div
        @click="state.closeOnClickModel ? (state.isShow = false) : ''"
        class="view-img-mask"
      ></div>
      <div class="btns">
        <!-- 放大 -->
        <el-button
          size="large"
          @click="transform.scale += 0.1"
          class="hang i-bigger"
          circle
        ></el-button>
        <!-- 缩小 -->
        <el-button
          size="large"
          @click="transform.scale > 0.2 ? (transform.scale -= 0.1) : ''"
          class="hang i-smaller"
          circle
        ></el-button>
        <!-- 旋转 -->
        <el-button
          size="large"
          @click="transform.rotate += 90"
          class="hang i-rotate"
          circle
        ></el-button>
        <!-- 关闭 -->
        <el-button size="large" @click="close" class="hang i-close" circle></el-button>
      </div>
      <img ref="imgRef" :style="state.imgStyle" :src="state.imgUrl" alt="" />
    </div>
  </Transition>
</template>
<style lang="scss" scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.view-img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  &-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: #000;
  }
  .btns {
    position: absolute;
    z-index: 2;
    bottom: 40px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px;
    .el-button {
      font-size: 20px;
      background: transparent;
      color: #fff;
      border: none;
    }
  }
  img {
    width: 50%;
    transition: 0.5s all;
    z-index: 1;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
